<template lang="pug">
    .work_main_box.font
        navs
        .boxs.m-auto.page-w
            .banner-box {{current.headline}}
            ul.work-list.m-t30.p-lr50(v-loading='loadingObj.listLoading')
                li(v-for="n in result.list")
                    div.box-li-work(@click="toPageDetails(n)")
                        .l
                            p
                                b {{formatTimeFn(n.sendTime).slice(8,10)}}
                            span {{formatTimeFn(n.sendTime).slice(0,7)}}
                        .r
                            p {{n.title}}
                            p(v-html="n.description") 
            .el-pagination-page.m-auto
                el-pagination(background @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="pageConfig.page"
                        :page-sizes="[20, 40, 100]"
                        :page-size="pageConfig.page_size"
                        layout="prev, pager, next, sizes"
                        :total="result.total")
</template>
<script>
import Navs from './../../components/nav.vue';
import Utils from '../../utils/index.js';

export default {
    name: 'work',
    data () {
        return {
            currentObj: {
                currentPage: 1
            },
            current: {
                headline: '工作动态'
            },
            loadingObj: {
                listLoading: true, 
            },
            pageConfig: {
                pageNo: 1,
                pageSize: 20
            },
            result: {
            }
        };
    },
    components: {
        Navs
    },
    methods: {
        formatTimeFn(val) {
            return Utils.formatTime(val, 'YYYY-MM-DD');
        },
        // 工作动态
        getWorkTrend() {
            this.loadingObj.listLoading = true;
            let params = {
                ...this.pageConfig,
                category: 'job_news'
            };
            this.axios.post('/ctepapi/admin-api/system/article-open/news/page',
                params, 
                {
                    headers: {'Content-Type': 'application/json'}
                }
            ).then((resp) => {
                let {errno, errmsg, data} = resp.data;
                if (errno * 1 !== 0) {
                    this.loadingObj.listLoading = false;
                    this.result = data;
                }
            });
        },
        handleSizeChange(page) {
            this.pageConfig.pageSize = page;
            this.pageConfig.pageNo = 1;
            this.getWorkTrend();
        },
        handleCurrentChange(page) {
            this.pageConfig.pageNo = page;
            this.getWorkTrend();
        },
        toPageDetails (n) {
            let {id} = n;
            let routeData = this.$router.resolve({ path: '/details', query: { id, headline: '工作动态'} });
            window.open(routeData.href, '_blank');

        },
        info () {
            this.getWorkTrend();
        }
    },
    mounted () {
        let {headline = '工作动态' } = this.$route.query;
        this.current.headline = headline;
        this.info();
    },
    destroyed () {
    }
};
</script>
<style lang="sass" scoped>
    .work_main_box
        .work-list
            font-family: PingFangSC-Medium, PingFang SC
            font-weight: 500
            li
                cursor: pointer
                padding: 0px 16px
                background: #f5fdfc
                .box-li-work
                    display: flex
                    padding: 24px
                    
                    border-bottom: 1px  #ccc dashed
                .l
                    text-align: center
                    border-top: 3px solid #F0D478 
                    p
                        padding-top: 10px
                        width: 70px
                        line-height: 50px
                    b
                        font-size: 48px
                        color: #6A707E
                        
                
                    span
                        font-size: 18px
                        color: #6A707E
                        display: block

                .r
                    flex: 1
                    padding-left: 25px
                    p
                        word-break: break-all
                        
                        &:first-child
                            color: #333333
                            font-size: 22px
                            font-weight: 500
                        &:last-child
                            color: #666666
                            font-size: 16px
                            padding-top: 16px
                &:hover
                    background: #eafcf9
                    .l
                        border-top: 3px solid #004b43
                        // width: 70px
                        b
                            
                    .r
                        p

                            &:first-child 
                                color:#034d46
                            &:last-child
                                color: #21635c
                &:last-child
                    margin-bottom: 25px
                    div
                        border: 0
                    
                    

        .el-pagination-page
            text-align: center
            padding-bottom: 40px
            margin-top: 30px


</style>